<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="name" hide-label>
                    <a-input
                      v-model="form.name"
                      class="width100"
                      placeholder="请输入套餐名称"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="seriesId" hide-label>
                    <a-select
                      class="width100"
                      allow-search
                      v-model="form.seriesId"
                      placeholder="请选择系列"
                      allow-clear
                    >
                      <a-option v-for="item in seriesNo" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operator" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.operator"
                      placeholder="请选择运营商"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelId" hide-label>
                    <a-select
                      class="width100"
                      allow-search
                      v-model="form.channelId"
                      placeholder="请选择渠道"
                      allow-clear
                    >
                      <a-option v-for="item in channelNo" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.type"
                      placeholder="请选择套餐类型"
                      allow-clear
                    >
                      <a-option :value="0">无限叠加</a-option>
                      <a-option :value="1">基础套餐</a-option>
                      <a-option :value="2">叠加包</a-option>
                      <!-- <a-option :value="3">体验包</a-option> -->
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="next" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.next"
                      placeholder="请选择次月套餐"
                      allow-clear
                    >
                      <a-option :value="1">开启</a-option>
                      <a-option :value="0">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="close" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.close"
                      placeholder="请选择套餐状态"
                      allow-clear
                    >
                      <a-option :value="1">关闭</a-option>
                      <a-option :value="0">开启</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="showPay" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.showPay"
                      placeholder="请选择展示支付状态"
                      allow-clear
                    >
                      <a-option :value="0">关闭</a-option>
                      <a-option :value="1">开启</a-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      placeholder="请选择结束创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        html-type="submit"
                        v-permission="getMealList"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="getMealList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button
            type="primary"
            v-permission="addMeal"
            @contextmenu.prevent.stop="onAddItems"
            @click="onAddItems"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
          <a-button
            type="outline"
            v-permission="exportMealList"
            @click="exportChannelLists"
            :loading="loading"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tables.tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
          :scroll="{ x: 1500 }"
          @change="handleChange"
          :draggable="form.seriesId && sortShow == true ? { type: 'handle', width: 40 } : {}"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              :align="item.align"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'name'" #cell="{ record }">
                <div class="ba">
                  <img
                    class="img"
                    v-if="record.series.operator == 0"
                    src="@/assets/yd.png"
                    alt=""
                  />
                  <img
                    class="img"
                    v-if="record.series.operator == 1"
                    src="@/assets/lt.png"
                    alt=""
                  />
                  <img
                    class="img"
                    v-if="record.series.operator == 2"
                    src="@/assets/dx.png"
                    alt=""
                  />
                  <img
                    class="img"
                    v-if="record.series.operator == 3"
                    src="@/assets/gd.png"
                    alt=""
                  />
                  <div
                    v-if="record.name.length < 12"
                    style="
                      width: 135px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      text-align: left;
                    "
                    >{{ record.name }}</div
                  >
                  <a-tooltip v-else :content="record.name">
                    <div
                      style="
                        width: 135px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        text-align: left;
                      "
                      >{{ record.name }}</div
                    >
                  </a-tooltip>
                </div>
                <div style="color: #86909c; font-size: 13px">
                  <a-space>
                    <span v-if="record.flowVirtual"
                      >流量：{{
                        record.flowVirtual >= 1024
                          ? Math.floor((record.flowVirtual / 1024) * 100) / 100 + 'G'
                          : Math.floor(record.flowVirtual * 100) / 100 + 'M'
                      }}</span
                    >
                    <span v-else
                      >流量：{{
                        record.flowReal >= 1024
                          ? Math.floor((record.flowReal / 1024) * 100) / 100 + 'G'
                          : Math.floor(record.flowReal * 100) / 100 + 'M'
                      }}</span
                    >
                    <span v-if="record.type == 0">无限叠加</span>
                    <span v-else-if="record.type == 1">基础套餐</span>
                    <span v-else-if="record.type == 2">叠加包</span>
                  </a-space>
                </div>
              </template>
              <template v-else-if="item.key === 'close'" #cell="{ record }">
                <a-switch
                  v-model="record.close"
                  :checked-value="false"
                  :unchecked-value="true"
                  @change="changeState(record)"
                >
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>
              </template>
              <template v-else-if="item.key === 'next'" #cell="{ record }">
                <div v-if="record.next == undefined">---</div>
                <a-switch
                  v-else
                  v-model="record.next"
                  :checked-value="true"
                  :unchecked-value="false"
                  @change="changeStates(record)"
                >
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>
              </template>
              <template v-else-if="item.key === 'showPay'" #cell="{ record }">
                <div v-if="record.showPay == undefined">---</div>
                <a-switch
                  v-else
                  v-model="record.showPay"
                  :checked-value="true"
                  :unchecked-value="false"
                  @change="changeStates(record)"
                >
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>
              </template>

              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <a-space>
                  <span v-if="record.type == 0">无限叠加</span>
                  <span v-else-if="record.type == 1">基础套餐</span>
                  <span v-else-if="record.type == 2">叠加包</span>
                  <!-- <span v-else-if="record.type == 3">体验包</span> -->
                </a-space>
              </template>
              <template v-else-if="item.key === 'seriesName'" #cell="{ record }">
                <a-space>
                  <div>{{ record.series.name }}</div>
                </a-space>
              </template>
              <template v-else-if="item.key === 'validity'" #cell="{ record }">
                <a-space>
                  <span v-if="record.validity">
                    <span v-if="record.validityMore == true && record.validityType == 0">
                      30&nbsp;{{ record.validityType == 0 ? '天' : '月' }}&nbsp; x&nbsp;{{
                        record.validity
                      }}
                    </span>
                    <span v-else>
                      {{ record.validity }}&nbsp;{{ record.validityType == 0 ? '天' : '月' }}
                    </span>
                  </span>
                  <span v-else>---</span>
                </a-space>
              </template>
              <template v-if="item.key === 'realNameSystem'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.realNameSystem == 0" color="arcoblue">短信验证</a-tag>
                  <a-tag v-else-if="record.realNameSystem == 1" color="red">国政通验证</a-tag>
                  <div v-else>---</div>
                </a-space>
              </template>
              <template v-if="item.key === 'flowReal'" #cell="{ record }">
                <a-space>
                  <span v-if="record.flowVirtual">{{
                    record.flowVirtual >= 1024
                      ? Math.floor((record.flowVirtual / 1024) * 100) / 100 + 'G'
                      : Math.floor(record.flowVirtual * 100) / 100 + 'M'
                  }}</span>
                  <span v-else>{{
                    record.flowReal >= 1024
                      ? Math.floor((record.flowReal / 1024) * 100) / 100 + 'G'
                      : Math.floor(record.flowReal * 100) / 100 + 'M'
                  }}</span></a-space
                >
              </template>

              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space>
                  <a-button
                    size="small"
                    type="text"
                    class="butten"
                    v-permission="updateMeal"
                    @click="infoDepartmentss(record)"
                    @contextmenu.prevent.stop="infoDepartmentss(record)"
                  >
                    编辑
                  </a-button>
                  <a-button
                    size="small"
                    v-permission="addMeal"
                    class="butten"
                    type="text"
                    @click="copy(record)"
                  >
                    复制
                  </a-button>
                  <a-button
                    size="small"
                    v-permission="delMeal"
                    class="butten"
                    type="text"
                    @click="onDeleteItem(record)"
                  >
                    删除
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
    <a-drawer
      :width="1000"
      :mask-closable="false"
      :visible="modal.visibles"
      @ok="handleSubmitsa"
      @cancel="beforeClose"
      @before-close="beforeClose"
      @close="beforeClose"
      class="asds"
    >
      <template #title>
        {{ addTitle }}
        <span
          v-if="showTextwa == true"
          @click="showTextwa = !showTextwa"
          style="
            color: #3491fa;
            font-size: 12px;
            margin-left: 15px;
            margin-top: 3px;
            cursor: pointer;
          "
          >教程文字 <icon-eye style="font-size: 12px" />
        </span>
        <span
          v-else
          @click="showTextwa = !showTextwa"
          style="
            color: #86909c;
            font-size: 12px;
            margin-left: 15px;
            margin-top: 3px;
            cursor: pointer;
          "
          >教程文字 <icon-eye-invisible style="font-size: 12px" />
        </span>
      </template>
      <Scrollbar class="wrapper">
        <a-form ref="infoRefs" layout="vertical" :model="infoForm" :auto-label-width="true">
          <a-collapse class="top" v-model:active-key="list1" expand-icon-position="right">
            <a-collapse-item key="1">
              <template #header>
                <div class="box">
                  <div class="line"></div>
                  <div class="text">套餐信息</div>
                </div>
              </template>
              <template #extra>
                <div>{{ list1.length == 1 ? '收起' : '展开' }}</div>
              </template>
              <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 15px">
                <a-form-item
                  field="seriesId"
                  label="套餐系列"
                  class="input516"
                  :rules="[{ required: true, message: '请选择套餐系列' }]"
                  asterisk-position="end"
                >
                  <a-select
                    v-model="infoForm.seriesId"
                    placeholder="请选择系列"
                    @change="opNameFn"
                    allow-clear
                    allow-search
                    @clear="api = false"
                  >
                    <a-option v-for="item in seriesNo" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  class="input516"
                  field="type"
                  label="套餐类型"
                  :rules="[{ required: true, message: '请选择套餐类型' }]"
                  asterisk-position="end"
                >
                  <a-radio-group
                    class="radio-bcg"
                    style="display: flex; justify-content: space-between; align-items: center"
                    @change="mealTypeFn"
                    v-model="infoForm.type"
                  >
                    <div>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">无限叠加</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">基础套餐</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="2">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">叠加包</div>
                          </div>
                        </template>
                      </a-radio>
                    </div>
                    <!-- <a-radio :value="3">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">体验包</div>
                        </div>
                      </template>
                    </a-radio> -->
                    <a-tooltip
                      content="无限叠加：套餐可以无限购买不限制生效，基础套餐：套餐每个周期只能购买一次用完
                      需要继续使用需要充值加油包，加油包：跟随基础套餐设置，体验包：用于客户体验"
                    >
                      <icon-question-circle style="color: var(--color-neutral-8)" />
                    </a-tooltip>
                  </a-radio-group>
                </a-form-item>

                <a-form-item
                  label="套餐名称"
                  field="name"
                  class="input516"
                  :rules="[
                    { required: true, message: '请输入套餐名称' },
                    { minLength: 1, maxLength: 30, message: '长度在 1 - 30个字符' },
                  ]"
                  asterisk-position="end"
                >
                  <a-input placeholder="请输入套餐名称" v-model.trim="infoForm.name" />
                  <template v-if="showTextwa" #extra>
                    <div>套餐名称只有总后台可以看到</div>
                  </template>
                </a-form-item>

                <a-form-item
                  label="显示名称"
                  field="showName"
                  class="input516"
                  :rules="[
                    { required: true, message: '请输入显示名称' },
                    { minLength: 1, maxLength: 30, message: '长度在 1 - 30个字符' },
                  ]"
                  asterisk-position="end"
                >
                  <a-input placeholder="请输入显示名称" v-model.trim="infoForm.showName" />
                  <template v-if="showTextwa" #extra>
                    <div>显示名称在客户后台和充值端可以看到</div>
                  </template>
                </a-form-item>

                <a-form-item
                  v-if="infoForm.type != 2"
                  label="有效期"
                  field="validity"
                  class="input516"
                  :rules="[{ required: true, message: '请输入有效期' }]"
                  asterisk-position="end"
                >
                  <a-input-group style="width: 100%">
                    <a-input v-model="infoForm.validity" allow-clear placeholder="请输入有效期">
                      <template #append>
                        <a-radio-group @change="changeDay" v-model="infoForm.validityType">
                          <a-radio :value="0">
                            <template #radio="{ checked }">
                              <div
                                style="display: flex"
                                :class="{ 'custom-radio-card-checked': checked }"
                              >
                                <div className="custom-radio-card-mask">
                                  <div className="custom-radio-card-mask-dot"></div> </div
                                ><div className="custom-radio-card-title">天</div>
                              </div>
                            </template>
                          </a-radio>
                          <a-radio :value="1">
                            <template #radio="{ checked }">
                              <div
                                style="display: flex"
                                :class="{ 'custom-radio-card-checked': checked }"
                              >
                                <div className="custom-radio-card-mask">
                                  <div className="custom-radio-card-mask-dot"></div> </div
                                ><div className="custom-radio-card-title">月</div>
                              </div>
                            </template>
                          </a-radio>
                        </a-radio-group>
                      </template>
                    </a-input>
                    <!-- <a-select
                      style="width: 20%"
                      v-model="infoForm.validityType"
                      placeholder="请选择有效期类型"
                    >
                      <a-option :value="0">天</a-option>
                      <a-option :value="1">月</a-option>
                    </a-select> -->
                  </a-input-group>
                  <template v-if="showTextwa" #extra>
                    <div>单位月：套餐月底清零或26号清零，单位天：套餐按天计算，可跨月使用</div>
                  </template>
                </a-form-item>

                <a-form-item
                  label="套餐规则"
                  field="validityRule"
                  class="input516"
                  v-if="infoForm.validityType == 1"
                  :rules="[{ required: true, message: '请选择套餐规则' }]"
                  asterisk-position="end"
                >
                  <a-radio-group class="radio-bcg" v-model="infoForm.validityRule">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">月底清零</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1" :disabled="modal.opName == 1 ? false : true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">26号清零</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template v-if="showTextwa" #extra>
                    <div>月底清零：每月月底23.59分套餐清零，26号清零：每月26号23.59分套餐清零</div>
                  </template>
                </a-form-item>
                <a-form-item label="分期套餐" class="input516" field="validityMore">
                  <a-radio-group class="radio-bcg" v-model="infoForm.validityMore">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template v-if="showTextwa" #extra>
                    <div>分期套餐开启后，填写多少天，代表有多少个30天套餐</div>
                  </template>
                </a-form-item>
                <a-form-item label="设备网络" class="input516" field="switchOperator">
                  <a-checkbox-group class="radio-bcg" v-model="infoForm.switchOperator">
                    <a-checkbox :value="0">中国移动</a-checkbox>
                    <a-checkbox :value="1">中国联通</a-checkbox>
                    <a-checkbox :value="2">中国电信</a-checkbox>
                    <a-checkbox :value="3">中国广电</a-checkbox>
                  </a-checkbox-group>
                  <template v-if="showTextwa" #extra>
                    <div>设备套餐为几网，就选择几网，需要我们系统控制切网才可以，其他无需选择 </div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="套餐成本"
                  field="cost"
                  class="input516"
                  :rules="[{ required: true, message: '请输入套餐成本' }]"
                  asterisk-position="end"
                >
                  <a-input-number
                    placeholder="请输入套餐成本"
                    v-model.trim="infoForm.cost"
                    hide-button
                  />
                  <template v-if="showTextwa" #extra>
                    <div>第三方套餐时，请填写上游的成本，方便对账</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="套餐售价"
                  field="price"
                  class="input516"
                  :rules="[{ required: true, message: '请输入套餐售价' }]"
                  asterisk-position="end"
                >
                  <a-input-number
                    placeholder="请输入套餐售价"
                    v-model.trim="infoForm.price"
                    hide-button
                  />
                  <template v-if="showTextwa" #extra>
                    <div>套餐的售价，售价需要大于套餐成本</div>
                  </template>
                </a-form-item>

                <a-form-item
                  v-if="api == true"
                  label="套餐编码"
                  field="encoding"
                  style="margin-bottom: 0"
                  class="input516"
                  :rules="[{ required: true, message: '请输入套餐编码' }]"
                  asterisk-position="end"
                >
                  <a-input
                    placeholder="请输入套餐编码"
                    v-model.trim="infoForm.encoding"
                    hide-button
                  />
                  <template v-if="showTextwa" #extra>
                    <div>第三方对接时，上游提供的套餐编码，不知道是什么的请联系上游提供</div>
                  </template>
                </a-form-item>

                <!-- <a-form-item
                  label="展示顺序"
                  field="sort"
                  style="margin-bottom: 0"
                  class="input516"
                  :rules="[{ required: true, message: '请输入套餐排序' }]"
                  asterisk-position="end"
                >
                  <a-input-number
                    placeholder="请输入套餐排序"
                    v-model.trim="infoForm.sort"
                    hide-button
                  />
                  <template v-if="showTextwa" #extra>
                    <div>套餐展示顺序的数字越大，套餐在充值端展示的顺序就越靠前</div>
                  </template>
                </a-form-item> -->
              </div>
            </a-collapse-item>
          </a-collapse>
          <div class="centersss">
            <a-collapse class="top" v-model:active-key="list2" expand-icon-position="right">
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <div class="line"></div>
                    <div class="text">流量设置</div>
                  </div>
                </template>
                <template #extra>
                  <div>{{ list2.length == 1 ? '收起' : '展开' }}</div>
                </template>
                <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 15px">
                  <a-form-item
                    v-if="api === false"
                    label="流量方案"
                    field="flowVirtualType"
                    class="input516"
                    :rules="[{ required: true, message: '请选择流量方案' }]"
                    asterisk-position="end"
                  >
                    <a-radio-group class="radio-bcg" v-model="infoForm.flowVirtualType">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">固定流量</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">动态流量</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>固定流量：套餐流量为固定比例，动态流量：根据阶梯计算流量</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    v-if="infoForm.flowVirtualType == 1"
                    class="input516"
                    field="flowVirtualId"
                    label="虚量方案"
                  >
                    <a-select
                      v-model="infoForm.flowVirtualId"
                      allow-search
                      placeholder="请选择虚量方案"
                      allow-clear
                    >
                      <a-option v-for="item in xuliangList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>

                  <a-form-item
                    label="系统流量"
                    field="flowReal"
                    class="input516"
                    :rules="[{ required: true, message: '请输入系统流量' }]"
                    asterisk-position="end"
                  >
                    <a-input-number
                      v-model="infoForm.flowReal"
                      placeholder="请输入系统流量(单位MB)"
                      hide-button
                      allow-clear
                    >
                      <template #append>
                        <a-button type="primary" @click="change1024(infoForm.flowReal, 3)">
                          换算
                        </a-button>
                      </template>
                    </a-input-number>
                    <template v-if="showTextwa" #extra>
                      <div
                        >系统流量为套餐真实流量，流量单位为MB，换算功能：比如输入框内输入1，点击
                        换算会自动换算为1024MB</div
                      >
                    </template>
                  </a-form-item>

                  <a-form-item
                    v-if="infoForm.flowVirtualType == 0 && api == false"
                    label="显示流量"
                    field="flowVirtual"
                    class="input516"
                    :rules="[{ required: true, message: '请输入显示流量' }]"
                    asterisk-position="end"
                  >
                    <a-input-number
                      v-model="infoForm.flowVirtual"
                      placeholder="请输入显示流量(单位MB)"
                      hide-button
                      allow-clear
                    >
                      <template #append>
                        <a-button
                          style="width: 100%"
                          type="primary"
                          @click="change1024(infoForm.flowVirtual, 4)"
                        >
                          换算
                        </a-button>
                      </template>
                    </a-input-number>
                    <template v-if="showTextwa" #extra>
                      <div
                        >显示流量为套餐虚量后的流量，流量单位为MB，换算功能：比如输入框内输入1，点
                        击换算会自动换算为1024MB</div
                      >
                    </template>
                  </a-form-item>

                  <a-form-item
                    label="次月套餐"
                    v-if="
                      (infoForm.type === 1 && infoForm.validityType === 1) ||
                      (infoForm.type === 0 && infoForm.validityType === 1)
                    "
                    class="input516"
                    field="next"
                  >
                    <a-radio-group class="radio-bcg" v-model="infoForm.next">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >开启：套餐可以充值次月，关闭：套餐不可以充值次月，对接第三方时如果套餐不可
                        以充值次月请勿开启，否则会充值为本月，是否可以充值次月请咨询上游</div
                      >
                    </template>
                  </a-form-item>
                  <!-- <a-form-item label="周期顺延" class="input516" field="postponed">
                  <a-radio-group class="radio-bcg" v-model="infoForm.postponed">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template v-if="showTextwa" #extra>
                    <div
                      >顺延：再次充值的套餐将会在当前生效套餐的到期时间后顺延，比如当前生效套餐15
                      日到期，再次充值30天的套餐，将会15日后顺延30天，也就是+30天</div
                    >
                  </template>
                </a-form-item> -->

                  <!-- <a-form-item label="多月到账" class="input516" field="multiMonth">
                  <a-radio-group class="radio-bcg" v-model="infoForm.multiMonth">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template v-if="showTextwa" #extra>
                    <div>开启：套餐分多次生效，每个周期固定的流量，关闭：套餐分一次生效</div>
                  </template>
                </a-form-item> -->
                </div>
              </a-collapse-item>
            </a-collapse>
          </div>
          <div class="centersss">
            <a-collapse class="top" v-model:active-key="list3" expand-icon-position="right">
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <div class="line"></div>
                    <div class="text">其他设置</div>
                  </div>
                </template>
                <template #extra>
                  <div>{{ list3.length == 1 ? '收起' : '展开' }}</div>
                </template>
                <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 15px">
                  <a-form-item
                    class="input516"
                    label="单次购买"
                    v-if="
                      (infoForm.type != 1 && api == false) ||
                      (infoForm.type == 1 && infoForm.next == false && api == false)
                    "
                    field="minimumQuantity"
                  >
                    <a-input-group style="width: 100%">
                      <a-input-number
                        :min="1"
                        v-model="infoForm.minimumQuantity"
                        placeholder="最低购买次数"
                      />
                      <a-input-number
                        v-model="infoForm.maximumQuantity"
                        placeholder="最高购买次数"
                      />
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>可以限制套餐单次购买多少个</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="套餐上锁" field="packageLocking">
                    <a-select
                      placeholder="请选择方式"
                      v-model="infoForm.packageLocking"
                      allow-clear
                    >
                      <a-option :value="0">未充值过余额</a-option>
                      <a-option :value="1">未充值过优惠券</a-option>
                      <a-option :value="2">上锁余额</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div>客户需要满足一定条件才可以充值这个套餐</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    v-if="infoForm.packageLocking == 2"
                    class="input516"
                    label="上锁余额"
                    field="packageLockingValue"
                  >
                    <a-input
                      placeholder="请输入上锁余额"
                      v-model.trim="infoForm.packageLockingValue"
                      hide-button
                    />

                    <template v-if="showTextwa" #extra>
                      <div>卡余额必须高于此数值才可以订购套餐</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="购买次数" field="buyNumber">
                    <a-input
                      placeholder="请输入购买次数"
                      v-model.trim="infoForm.buyNumber"
                      hide-button
                    />

                    <template v-if="showTextwa" #extra>
                      <div>限制充值前端购买次数</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="显示支付" field="showPay">
                    <a-radio-group class="radio-bcg" v-model="infoForm.showPay">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >开启：即使开启强制预存，套餐支付时依然显示除余额外支付，关闭则不显示支付</div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="限制售价" field="priceMin">
                    <a-input-group style="width: 100%">
                      <a-input v-model="infoForm.priceMin" placeholder="最低售价" />
                      <a-input v-model="infoForm.priceMax" placeholder="最高售价" />
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>限制客户设置套餐的最低售价和最高售价，没有需求不要设置</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="展示颜色" field="colour">
                    <a-radio-group class="radio-bcg" v-model="infoForm.colour">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>开启后，套餐在充值端展示时，会增加引人瞩目的颜色</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="划线价格" field="underline">
                    <a-input
                      placeholder="请输入划线价格"
                      v-model.trim="infoForm.underline"
                      hide-button
                    >
                      <template #suffix>
                        <a-tooltip content="充值端充值套餐时，展示的划线价格">
                          <icon-info-circle />
                        </a-tooltip>
                      </template>
                    </a-input>
                    <template v-if="showTextwa" #extra>
                      <div
                        >套餐后展示的套餐划线价格，一般超市促销展示的，原价99划线价格，现价9.9类似</div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="左上文字" field="leftUpper">
                    <a-input
                      placeholder="请输入左上文字"
                      v-model.trim="infoForm.leftUpper"
                      hide-button
                    >
                      <template #suffix>
                        <a-tooltip content="充值端套餐展示页面，套餐框左下展示的文字">
                          <icon-info-circle />
                        </a-tooltip>
                      </template>
                    </a-input>
                    <template v-if="showTextwa" #extra>
                      <div>输入后，套餐在充值端展示的框左上角，会增加营销文字</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="左下文字" field="leftLower">
                    <a-input
                      placeholder="请输入左下文字"
                      v-model.trim="infoForm.leftLower"
                      hide-button
                    >
                      <template #suffix>
                        <a-tooltip content="充值端套餐展示页面，套餐框左下展示的文字">
                          <icon-info-circle />
                        </a-tooltip>
                      </template>
                    </a-input>
                    <template v-if="showTextwa" #extra>
                      <div>输入后，套餐在充值端展示的框左下角，会增加营销文字</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    class="input516"
                    label="右上文字"
                    style="margin-bottom: 0"
                    field="rightUpper"
                  >
                    <a-input
                      placeholder="请输入右上文字"
                      v-model.trim="infoForm.rightUpper"
                      hide-button
                    >
                      <template #suffix>
                        <a-tooltip content="充值端套餐展示页面，套餐框右上展示的文字">
                          <icon-info-circle />
                        </a-tooltip>
                      </template>
                    </a-input>
                    <template v-if="showTextwa" #extra>
                      <div>输入后，套餐在充值端展示的框右上角，会增加营销文字</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="右下文字" field="rightLower">
                    <a-input
                      placeholder="请输入右下文字"
                      v-model.trim="infoForm.rightLower"
                      hide-button
                    >
                      <template #suffix>
                        <a-tooltip
                          content="充值端套餐展示页面，套餐框右下展示的文字
"
                        >
                          <icon-info-circle />
                        </a-tooltip>
                      </template>
                    </a-input>
                    <template v-if="showTextwa" #extra>
                      <div>输入后，套餐在充值端展示的框右下角，会增加营销文字</div>
                    </template>
                  </a-form-item>
                  <a-form-item class="input516" label="套餐标签" field="tagList">
                    <a-select
                      class="width100"
                      v-model="infoForm.tagList"
                      placeholder="请选择套餐标签"
                      allow-clear
                      multiple
                      :max-tag-count="1"
                    >
                      <a-option v-for="item in tagList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template #extra>
                      <div>套餐标签代表这个套餐的特色</div>
                    </template>
                  </a-form-item>

                  <!-- <a-form-item class="input516" label="上平行" field="upperParallel">
                  <a-input
                    placeholder="请输入左下文字"
                    v-model.trim="infoForm.upperParallel"
                    hide-button
                  >
                    <template #suffix>
                      <a-tooltip content="充值端套餐展示页面，套餐框左下展示的文字">
                        <icon-info-circle />
                      </a-tooltip>
                    </template>
                  </a-input>
                  <template v-if="showTextwa" #extra>
                    <div>输入后，套餐在充值端展示的框上部分，会增加营销文字</div>
                  </template>
                </a-form-item> -->
                  <!-- <a-form-item class="input516" label="下平行" field="lowerParallel">
                  <a-input
                    placeholder="请输入右上文字"
                    v-model.trim="infoForm.lowerParallel"
                    hide-button
                  >
                    <template #suffix>
                      <a-tooltip content="充值端套餐展示页面，套餐框右上展示的文字">
                        <icon-info-circle />
                      </a-tooltip>
                    </template>
                  </a-input>
                  <template v-if="showTextwa" #extra>
                    <div>输入后，套餐在充值端展示的框下部分，会增加营销文字</div>
                  </template>
                </a-form-item>
                <a-form-item
                  class="input516"
                  style="margin-bottom: 0"
                  label="左平行"
                  field="leftParallel"
                >
                  <a-input
                    placeholder="请输入右下文字"
                    v-model.trim="infoForm.leftParallel"
                    hide-button
                  >
                    <template #suffix>
                      <a-tooltip
                        content="充值端套餐展示页面，套餐框右下展示的文字
"
                      >
                        <icon-info-circle />
                      </a-tooltip>
                    </template>
                  </a-input>
                  <template v-if="showTextwa" #extra>
                    <div>输入后，套餐在充值端展示的框左部分，会增加营销文字</div>
                  </template>
                </a-form-item>
                <a-form-item
                  class="input516"
                  style="margin-bottom: 0"
                  label="右平行"
                  field="rightParallel"
                >
                  <a-input
                    placeholder="请输入左上文字"
                    v-model.trim="infoForm.rightParallel"
                    hide-button
                  >
                    <template #suffix>
                      <a-tooltip content="充值端套餐展示页面，套餐框左下展示的文字">
                        <icon-info-circle />
                      </a-tooltip>
                    </template>
                  </a-input>
                  <template v-if="showTextwa" #extra>
                    <div>输入后，套餐在充值端展示的框右部分，会增加营销文字</div>
                  </template>
                </a-form-item> -->
                </div>
              </a-collapse-item>
            </a-collapse>
          </div>
          <div class="centersss" style="margin-bottom: 5px">
            <a-collapse class="top" v-model:active-key="list4" expand-icon-position="right">
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <div class="line"></div>
                    <div class="text">套餐介绍</div>
                  </div>
                </template>
                <template #extra>
                  <div>{{ list4.length == 1 ? '收起' : '展开' }}</div>
                </template>
                <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 15px">
                  <a-form-item class="input516" label="套餐图片" field="image">
                    <a-upload
                      action="/app/file/upload"
                      :show-file-list="false"
                      @error="onError"
                      @success="onSuccessBcg1"
                      :image-preview="true"
                    >
                      <template #upload-button>
                        <div
                          class="arco-upload-list-picture custom-upload-avatar"
                          v-if="infoForm.image"
                        >
                          <img :src="infoForm.image" />
                          <div class="arco-upload-list-picture-mask">
                            <IconEdit />
                          </div>
                        </div>
                        <div class="arco-upload-picture-card" v-else>
                          <div class="arco-upload-picture-card-text">
                            <IconPlus />
                          </div>
                        </div>
                        <!-- </div> -->
                      </template>
                    </a-upload>
                  </a-form-item>
                  <a-form-item
                    style="margin-bottom: 20px; margin-left: 20px; margin-right: 20px"
                    label="套餐介绍"
                    field="introduction"
                  >
                    <a-card :body-style="{ padding: '0px' }">
                      <RichTextEditor
                        v-if="modal.visibles"
                        v-model="infoForm.introduction"
                        ref="richTextEditors"
                      />
                    </a-card>
                    <template #suffix>
                      <a-tooltip content="充值端充值套餐时，展示的套餐介绍">
                        <icon-info-circle />
                      </a-tooltip>
                    </template>
                  </a-form-item>
                </div>
              </a-collapse-item>
            </a-collapse>
          </div>
        </a-form>
      </Scrollbar>
      <template #footer>
        <a-space v-if="infoForm.id">
          <a-button @click="beforeClose">取消</a-button>
          <a-button type="primary" @click="handleSubmitsa">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between">
          <a-checkbox v-model="checked1">继续新建下一个套餐</a-checkbox>
          <a-space>
            <a-button @click="beforeClose">取消</a-button>
            <a-button type="primary" @click="handleSubmitsa">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-drawer>
    <!-- 复制套餐 -->
    <a-modal
      v-model:visible="copyVisible"
      title="复制套餐"
      width="600px"
      @before-close="copyCel"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="copyRef" :auto-label-width="true" :model="copyForm">
        <a-form-item field="name" label="套餐名称">
          {{ copyForm.name }}
        </a-form-item>
        <a-form-item field="copyType" label="复制类型">
          <a-radio-group class="radio-bcg" v-model="copyForm.copyType">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">一键复制</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">编辑并复制</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="copyForm.copyType == true"
          field="copyNum"
          label="复制数量"
          :rules="[{ required: true, message: '复制数量不能为空' }]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="copyForm.copyNum" placeholder="请输入复制数量" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="copyCel">取消</a-button>
          <a-button type="primary" @click="copyCancel">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 套餐提示 -->
    <a-modal
      v-model:visible="promptVisible"
      title="套餐提示"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div
        style="
          border: 1px solid red;
          border-radius: 4px;
          padding: 10px;
          font-size: 13px;
          color: red;
          display: flex;
          align-items: center;
        "
      >
        <img src="@/assets/reds.png" style="margin-right: 5px; width: 15px; height: 15px" alt="" />
        如果您的套餐为多网设备套餐，套餐时间请不要新建26号清零！！！
      </div>
      <div class="border-box">
        <div>
          <span class="title"> 显示名称 </span>
          <span> {{ infoForm.showName }} </span>
        </div>
      </div>
      <div class="border-box">
        <div>
          <span class="title"> 系统流量 </span>
          <span>
            {{
              infoForm.flowReal >= 1024
                ? Math.floor((infoForm.flowReal / 1024) * 100) / 100 + 'G'
                : Math.floor(infoForm.flowReal * 100) / 100 + 'M'
            }}</span
          >
        </div>
        <span
          style="color: red; margin-left: 10px"
          v-if="!isIntegerDivisionBy1024(infoForm.flowVirtual)"
          >流量不是整数，建议核实套餐，如果确定没问题请忽略提示
        </span>
      </div>
      <div class="border-box" v-if="infoForm.flowVirtual">
        <div>
          <span class="title"> 显示流量 </span>
          <span>
            {{
              infoForm.flowVirtual >= 1024
                ? Math.floor((infoForm.flowVirtual / 1024) * 100) / 100 + 'G'
                : Math.floor(infoForm.flowVirtual * 100) / 100 + 'M'
            }}/{{ Math.floor((1 - infoForm.flowReal / infoForm.flowVirtual) * 100) }}%
          </span>
        </div>
        <span
          style="color: red; margin-left: 10px"
          v-if="!isIntegerDivisionBy1024(infoForm.flowVirtual)"
          >流量不是整数，建议核实套餐，如果确定没问题请忽略提示
        </span>
      </div>
      <div class="border-box">
        <div>
          <span class="title"> 套餐时间 </span>
          <span v-if="infoForm.validity">
            <span v-if="infoForm.validityMore == true && infoForm.validityType == 0">
              30&nbsp;天&nbsp; x&nbsp;{{ infoForm.validity }}
              <span
                >【每30天
                <span v-if="infoForm.flowVirtual">
                  {{
                    infoForm.flowVirtual >= 1024
                      ? Math.floor((infoForm.flowVirtual / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowVirtual * 100) / 100 + 'M'
                  }}
                </span>
                <span v-else>
                  {{
                    infoForm.flowReal >= 1024
                      ? Math.floor((infoForm.flowReal / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowReal * 100) / 100 + 'M'
                  }}
                </span>
                ，共{{ infoForm.validity }}个30天】</span
              >
            </span>
            <span v-if="infoForm.validityMore == true && infoForm.validityType == 1">
              {{ infoForm.validity }}个月<span v-if="infoForm.validityType == 1"
                >/{{ infoForm.validityRule == 0 ? '月底清零' : '26号清零' }}</span
              ><span
                >【每月
                <span v-if="infoForm.flowVirtual">
                  {{
                    infoForm.flowVirtual >= 1024
                      ? Math.floor((infoForm.flowVirtual / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowVirtual * 100) / 100 + 'M'
                  }}
                </span>
                <span v-else>
                  {{
                    infoForm.flowReal >= 1024
                      ? Math.floor((infoForm.flowReal / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowReal * 100) / 100 + 'M'
                  }}
                </span>
                ，共{{ infoForm.validity }}个月】</span
              >
            </span>
            <span v-else>
              <span
                >{{ infoForm.validity }}&nbsp;{{ infoForm.validityType == 0 ? '天' : '个月' }}</span
              >
              <span v-if="infoForm.validityType == 1"
                >/{{ infoForm.validityRule == 0 ? '月底清零' : '26号清零' }}</span
              ><span v-if="infoForm.validityType == 0"
                >【{{ infoForm.validity }}天一共
                <span v-if="infoForm.flowVirtual">
                  {{
                    infoForm.flowVirtual >= 1024
                      ? Math.floor((infoForm.flowVirtual / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowVirtual * 100) / 100 + 'M'
                  }}
                </span>
                <span v-else>
                  {{
                    infoForm.flowReal >= 1024
                      ? Math.floor((infoForm.flowReal / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowReal * 100) / 100 + 'M'
                  }} </span
                >】</span
              >
              <span v-if="infoForm.validityType == 1 && infoForm.validity > 1"
                >【{{ infoForm.validity }}个月一共
                <span v-if="infoForm.flowVirtual">
                  {{
                    infoForm.flowVirtual >= 1024
                      ? Math.floor((infoForm.flowVirtual / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowVirtual * 100) / 100 + 'M'
                  }}
                </span>
                <span v-else>
                  {{
                    infoForm.flowReal >= 1024
                      ? Math.floor((infoForm.flowReal / 1024) * 100) / 100 + 'G'
                      : Math.floor(infoForm.flowReal * 100) / 100 + 'M'
                  }}
                </span>
                】</span
              >
            </span>
          </span>
        </div>
      </div>
      <div class="border-box">
        <div>
          <span class="title"> 无限流量 </span>
          <span>
            {{ wuXian == true ? '是' : '否' }}
            <span v-if="wuXian == true"
              >【当前套餐不满足无限流量条件，需要流量大于{{
                Math.floor((wuXianNum / 1024) * 100) / 100
              }}G】</span
            >
          </span>
        </div>
      </div>
      <div class="border-box" style="height: 90px" v-if="infoForm.flowVirtual">
        <div>
          <span class="title"> 套餐类型 </span>
          <span v-if="infoForm.type == 0">无限叠加</span>
          <span v-else-if="infoForm.type == 1">基础套餐</span>
          <span v-else-if="infoForm.type == 2">叠加包</span>
        </div>
        <span class="title"> </span>
        <div v-if="infoForm.type == 0" style="margin-left: 62px"
          >一个周期内套餐使用完，可以立即充值下一个套餐并立即生效，或者
          未使用完继续充值，流量可以无限充值不限制</div
        >
        <div style="margin-left: 62px" v-else-if="infoForm.type == 1"
          >一个周期内使用完，需要充值叠加包才可以继续使用，继续充值套餐
          周期会进行顺延，一个周期内不能生效两个基础套餐</div
        >
        <div style="margin-left: 62px" v-else-if="infoForm.type == 2"
          >基础套餐的搭档，一个周期内卡在充值了基础套餐使用完毕后，充值
          叠加包才可以继续使用，没有基础套餐生效时，不可以充值叠加包</div
        >
      </div>
      <template #footer>
        <a-space>
          <a-button @click="promptVisible = false">取消</a-button>
          <a-button type="primary" @click="processFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import {
    getMealList,
    addMeal,
    delMeal,
    updateMeal,
    exportMealList,
    closeMeal,
    mealsort,
  } from '@/api/url'

  import useCommonStore from '@/store/modules/common'
  import { post, get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'

  import _ from 'lodash-es'

  import { Message, Modal } from '@arco-design/web-vue'

  function isIntegerDivisionBy1024(number) {
    return number % 1024 === 0
  }
  const promptVisible = ref(false)
  const showTextwa = ref(true)
  const useCommon = useCommonStore()

  const table = useTable()

  const pagination = usePagination(doRefresh)

  const infoRef = ref()

  const checked1 = ref(false)

  const seachForm = ref()

  const copyRef = ref()

  const richTextEditore = ref()
  const richTextEditors = ref()
  const copyVisible = ref(false)
  //Logo上传
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
  }

  //商品设置上传客服图片
  const onSuccessBcg1 = (fileItem: any) => {
    infoForm.value.image = fileItem.response.data.path
  }

  const copyForm = ref({
    id: '',
    name: '',
    copyType: true,
    copyNum: 1,
  })

  const loading = ref(false)

  const channelNo = ref()
  const seriesNo = ref()
  const xuliangList = ref()
  const encoding: any = ref([])
  const addTitle = ref('新建套餐')
  const modal = reactive({
    visible: false,
    visibleRealName: false,
    key: '1',
    visibles: false,
    opName: 0,
  })

  const form = reactive({
    channelId: '', //渠道id
    seriesId: '', //系列id
    type: '', //套餐类型
    next: '', //次月
    close: '', //状态
    name: '', //系列类型
    operator: '', //运营商
    showPay: '',
    addTime: '',
    endTime: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const info: any = reactive({
    info: {
      id: '',
      seriesId: '', //系列ID
      type: 0, //套餐类型 0无限叠加 1基础套餐 2叠加包 3体验包
      name: '', //套餐名称
      showName: '', //显示名称
      validity: '', //有效期
      next: true, //次月套餐 false关闭 true开启
      validityType: 1, //有效期类型 0天 1月
      validityRule: 0, //有效期规则 0-月底清零 1-26号清理
      cost: '', //套餐成本
      price: '', //套餐售价
      priceMin: '', //限制代理最低售价
      priceMax: '', //限制代理最高售价
      flowReal: '', //真实流量 单位MB
      flowVirtualType: 0, //虚量方案类型 0固定流量 1动态流量
      flowVirtual: '', //虚量流量单位MB
      flowVirtualId: '', //虚量流量动态方案ID 从/app/set/meal/flow/virtual/get/name/list接口获取
      encoding: '', //套餐编码
      underline: '', //划线价格
      introduction: '',

      postponed: true, //顺延 false关闭 true开启
      multiMonth: true, //多月到账 false关闭 true开启
      sort: 0, //排序
      colour: true, //展示颜色
      leftLower: '', //左下文字
      rightUpper: '', //右上文字
      rightLower: '', //右下文字
      close: false, //状态true关闭,  false正常
      showPay: false, //显示支付 null不设置 0开启 1关闭
      buyNumber: '',
      leftUpper: '', //左上文字
      minimumQuantity: 1, //最低购买数量不能低于1
      maximumQuantity: 1, // 最高购买数量 为null不限制
      packageLocking: '', //套餐上锁 0卡板最低余额 1累计充值金额 2积累支付金额 为null不上锁
      packageLockingValue: '',
      upperParallel: '', //上平行
      lowerParallel: '', //下平行
      leftParallel: '', //左平行
      rightParallel: '', //右平行
      packageLockingBalance: '', //最低金额
    },
    disabled: false,
  })

  const list1 = ref(['1'])
  const list2 = ref(['1'])
  const list3 = ref(['1'])
  const list4 = ref(['1'])

  const tableColumns: any = reactive({
    list: [
      {
        title: '套餐编码',
        key: 'id',
        dataIndex: 'id',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '套餐名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        checked: true,
        width: 288,
        tooltip: false,
      },

      {
        title: '系列名称',
        key: 'seriesName',
        dataIndex: 'seriesName',
        align: 'left',
        checked: true,
        width: 150,
        tooltip: true,
      },
      // {
      //   title: '套餐类型',
      //   key: 'type',
      //   dataIndex: 'type',
      //   align: 'left',
      //   checked: true,
      //   width: 100,
      // },
      // {
      //   title: '套餐流量',
      //   key: 'flowReal',
      //   dataIndex: 'flowReal',
      //   align: 'left',
      //   checked: true,
      //   width: 100,
      // },

      {
        title: '有效期',
        key: 'validity',
        dataIndex: 'validity',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '售价',
        key: 'price',
        dataIndex: 'price',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '次月套餐',
        key: 'next',
        dataIndex: 'next',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '显示支付',
        key: 'showPay',
        dataIndex: 'showPay',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '套餐状态',
        key: 'close',
        dataIndex: 'close',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'left',
        checked: true,
        width: 190,
        tooltip: true,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 220,
        fixed: 'right',
      },
    ],
  })

  const rowKey = useRowKey('id')
  const api = ref(false)
  const sortShow = ref(false)
  const handleChange = (_data, extra) => {
    console.log(_data)
    console.log(extra.dragTarget.id)
    var sorts: { id: any; sort: any }[] = []
    _data.forEach((item, index) => {
      sorts.push({
        id: item.id,
        sort: index,
      })
      // item.sort = index
    })
    post({
      url: mealsort,
      data: sorts,
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        doRefresh()
      } else {
        Message.error(res.msg)
      }
    })
  }
  const wuXian = ref(false)
  const wuXianNum = ref(0)
  const opNameFn = (val: any) => {
    const foundSeries = seriesNo.value.find((item: any) => item.id === val)
    if (foundSeries) {
      modal.opName = foundSeries.operator // 设置运营商名称
      const matchedChannel = channelNo.value.find((item: any) => item.id === foundSeries.channelId)
      if (matchedChannel) {
        api.value = matchedChannel.api // 仅当找到匹配频道时更新API
      }
      if (foundSeries.unlimitedTrafficThreshold) {
        wuXian.value = true
        wuXianNum.value = foundSeries.unlimitedTrafficThreshold
      } else {
        wuXian.value = false
        wuXianNum.value = 0
      }
    }
    if (api.value === false) {
      infoForm.value.flowVirtualType = 0
    }
    info.info.minimumQuantity = 1
    info.info.maximumQuantity = 1
    infoForm.value.minimumQuantity = 1
    infoForm.value.maximumQuantity = 1
  }

  function changeDay() {
    if (infoForm.value.validityType == 1) {
      infoForm.value.validityRule = 0
      infoForm.value.next = true
    }
  }

  function mealTypeFn(val: any) {
    info.info.next = true
    info.info.validityType = 1
    info.info.validityRule = 0
    infoForm.value.next = true
    infoForm.value.validityType = 1
    infoForm.value.validityRule = 0
    infoForm.value.validityMore = false
  }

  const change1024 = (item: any, value: any) => {
    if (value == 1) {
      info.info.flowReal = item * 1024
    } else if (value == 2) {
      info.info.flowVirtual = item * 1024
    } else if (value == 3) {
      infoForm.value.flowReal = item * 1024
    } else if (value == 4) {
      infoForm.value.flowVirtual = item * 1024
    }
  }

  const encodingFn = () => {
    useCommon.encodings().then((res) => {
      encoding.value = res.data
    })
  }

  const channel = () => {
    useCommon.channels().then((res) => {
      channelNo.value = res.data
    })
  }
  const getxuliangs = () => {
    useCommon.xuliangs().then((res) => {
      xuliangList.value = res.data
    })
  }

  const seriesIds = () => {
    useCommon.seriess().then((res) => {
      seriesNo.value = res.data
    })
  }

  const resetSeach = () => {
    seachForm.value.resetFields()
    doRefresh(1)
  }

  const exportChannelLists = () => {
    loading.value = true
    useCommon
      .downLoads(exportMealList, form, '套餐列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const copy = (val: any) => {
    infoForm.value = JSON.parse(JSON.stringify(val))
    copyForm.value.name = val.name
    infoForm.value.id = ''
    copyVisible.value = true
  }

  const copyCel = () => {
    copyRef.value.resetFields()
    copyVisible.value = false
  }

  const copyCancel = () => {
    copyRef.value.validate((error: any) => {
      if (!error) {
        if (copyForm.value.copyType == true) {
          const num = copyForm.value.copyNum
          infoForm.value.name = info.info.name + '-复制'
          for (let index = 0; index < num; index++) {
            addMeals(infoForm.value)
          }
          copyRef.value.resetFields()
          copyVisible.value = false
        } else {
          infoForm.value.id = null
          api.value = infoForm.value.series.channel.api
          infoForm.value.name = infoForm.value.name + '-复制'
          copyRef.value.resetFields()
          copyVisible.value = false
          if (infoForm.value.tagList) {
            const tags: any = []
            infoForm.value.tagList.forEach((item: any) => {
              tags.push(item.id)
            })
            infoForm.value.tagList = tags
          } else {
            infoForm.value.tagList = []
          }
          modal.visibles = true
        }
        copyVisible.value = false
      }
    })
  }

  const beforeClose = () => {
    infoRefs.value.clearValidate()
    infoRefs.value.resetFields()
    modal.key = '1'
    checked1.value = false
    list1.value = ['1']
    list2.value = ['1']
    list3.value = ['1']
    list4.value = ['1']
    info.info.maximumQuantit = ''
    info.info.close = false
    infoForm.value.close = false
    infoForm.value.maximumQuantit = ''
    infoForm.value.id = ''

    modal.visibles = false
    api.value = false
    localStorage.setItem('mealShow', showTextwa.value)
  }

  function changeState(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要改变套餐状态吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: closeMeal,
          data: () => {
            return {
              close: item.close,
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
      },
    })
  }

  const infoRefs = ref()
  // const handleSubmits = () => {
  //   // console.log(info.info)
  //   // return false
  //   infoRefs.value.validate((error: any) => {
  //     if (!error) {
  //       if (info.info.id) {
  //         updateMeals(infoForm.value)
  //       } else {
  //         addMeals(infoForm.value)
  //       }
  //     }
  //   })
  // }
  const handleSubmitsa = () => {
    // console.log(info.info)
    // return false
    infoRefs.value.validate((error: any) => {
      if (!error) {
        promptVisible.value = true
      }
    })
  }

  function processFn() {
    if (infoForm.value.id) {
      updateMeals(infoForm.value)
    } else {
      addMeals(infoForm.value)
    }
  }
  const handleSubmit = () => {
    // console.log(info.info)
    // return false
    infoRef.value.validate((error: any) => {
      if (!error) {
        if (info.info.id) {
          updateMeals(info.info)
        } else {
          addMeals(info.info)
        }
      }
    })
  }

  const infoDepartments = async (val: any) => {
    // seriesNo.value.forEach((item: any) => {
    //   channelNo.value.forEach((items: any) => {
    //     //看系列是否是api
    //     if (item.channelId == items.id) {
    //       item.api = items.api
    //     }
    //     if (items.id == val.id) {
    //       api.value = items.api
    //     }
    //   })
    // })
    seriesIds()
    channel()
    api.value = val.series.channel.api
    info.info = JSON.parse(JSON.stringify(val))
    addTitle.value = '编辑套餐'
    modal.visible = true
  }
  const infoForm = ref({
    switchOperator: [],
    image: '',
    tagList: [],
    id: '',
    buyNumber: '',
    seriesId: '', //系列ID
    type: 0, //套餐类型 0无限叠加 1基础套餐 2叠加包 3体验包
    name: '', //套餐名称
    showName: '', //显示名称
    validity: '', //有效期
    validityType: 1, //有效期类型 0天 1月
    validityRule: 0, //有效期规则 0-月底清零 1-26号清理
    cost: '', //套餐成本
    price: '', //套餐售价
    priceMin: '', //限制代理最低售价
    priceMax: '', //限制代理最高售价
    flowReal: '', //真实流量 单位MB
    flowVirtualType: 0, //虚量方案类型 0固定流量 1动态流量
    flowVirtual: '', //虚量流量单位MB
    flowVirtualId: '', //虚量流量动态方案ID 从/app/set/meal/flow/virtual/get/name/list接口获取
    encoding: '', //套餐编码
    underline: '', //划线价格
    introduction: '',
    next: true, //次月套餐 false关闭 true开启
    postponed: true, //顺延 false关闭 true开启
    multiMonth: true, //多月到账 false关闭 true开启
    sort: 0, //排序
    colour: true, //展示颜色
    leftLower: '', //左下文字
    rightUpper: '', //右上文字
    rightLower: '', //右下文字
    close: false, //状态true关闭,  false正常
    showPay: false, //显示支付 null不设置 0开启 1关闭
    leftUpper: '', //左上文字
    minimumQuantity: 1, //最低购买数量不能低于1
    maximumQuantity: 1, // 最高购买数量 为null不限制
    packageLocking: '', //套餐上锁 0卡板最低余额 1累计充值金额 2积累支付金额 为null不上锁
    packageLockingValue: '',
    upperParallel: '', //上平行
    lowerParallel: '', //下平行
    leftParallel: '', //左平行
    rightParallel: '', //右平行
    packageLockingBalance: '', //最低金额
    validityMore: false,
  })
  const infoDepartmentss = async (val: any) => {
    // seriesNo.value.forEach((item: any) => {
    //   channelNo.value.forEach((items: any) => {
    //     //看系列是否是api
    //     if (item.channelId == items.id) {
    //       item.api = items.api
    //     }
    //     if (items.id == val.id) {
    //       api.value = items.api
    //     }
    //   })
    // })
    if (localStorage.getItem('mealShow')) {
      showTextwa.value = JSON.parse(localStorage.getItem('mealShow'))
    }
    if (val.tagList) {
      const tags: any = []
      val.tagList.forEach((item: any) => {
        tags.push(item.id)
      })
      val.tagList = tags
    } else {
      val.tagList = []
    }
    seriesIds()
    channel()
    modal.opName = val.series.operator
    api.value = val.series.channel.api
    if (val.series.unlimitedTrafficThreshold) {
      wuXian.value = true
      wuXianNum.value = val.series.unlimitedTrafficThreshold
    } else {
      wuXian.value = false
      wuXianNum.value = 0
    }
    infoForm.value = JSON.parse(JSON.stringify(val))
    addTitle.value = '编辑套餐'
    modal.visibles = true
  }

  const updateMeals = (val: any) => {
    let tag: any = []
    if (val.tagList) {
      if (val.tagList.length > 0) {
        val.tagList.forEach((item: any) => {
          tag.push({ id: item })
        })
      }
    } else {
      tag = []
    }
    post({
      url: updateMeal,
      data: {
        ...val,
        tagList: tag,
      },
    }).then((res) => {
      if (res.code == 0) {
        promptVisible.value = false
        Message.success(res.msg)
        beforeClose()
        doRefresh()
      }
    })
  }

  function changeStates(item: any) {
    post({
      url: updateMeal,
      data: () => {
        return {
          ...item,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        doRefresh()
      } else {
        Message.error(res.msg)
      }
    })
  }

  const addMeals = (val: any) => {
    let tag: any = []
    if (val.tagList) {
      if (val.tagList.length > 0) {
        val.tagList.forEach((item: any) => {
          tag.push({ id: item })
        })
      }
    } else {
      tag = []
    }
    post({
      url: addMeal,
      data: {
        ...val,
        tagList: tag,
      },
    }).then((res) => {
      if (res.code == 0) {
        promptVisible.value = false
        if (checked1.value == true) {
          infoRefs.value.clearValidate()
          infoRefs.value.resetFields()
          modal.key = '1'
          checked1.value = false
          list1.value = ['1']
          list2.value = ['1']
          list3.value = ['1']
          list4.value = ['1']
          infoForm.value.maximumQuantit = ''
          Message.success('新建成功，当前已开始新建新的套餐')
          doRefresh()
        } else {
          Message.success(res.msg)
          beforeClose()
          doRefresh()
        }
      }
    })
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    if (form.seriesId) {
      sortShow.value = true
    }
    get({
      url: getMealList,
      data: {
        ...form,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //删除套餐
  const deleteChannels = (val: number) => {
    get({
      url: delMeal,
      data: {
        id: val,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        doRefresh()
      }
    })
  }

  const onDeleteItem = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此套餐吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        deleteChannels(item.id)
      },
    })
  }

  const onAddItem = () => {
    info.info.id = null
    seriesNo.value.forEach((item: any) => {
      channelNo.value.forEach((items: any) => {
        if (item.channelId == items.id) {
          item.api = items.api
        }
      })
    })
    seriesIds()
    addTitle.value = '新建套餐'
    modal.visible = true
  }

  const onAddItems = () => {
    if (localStorage.getItem('mealShow')) {
      showTextwa.value = JSON.parse(localStorage.getItem('mealShow'))
    }
    info.info.id = null
    seriesNo.value.forEach((item: any) => {
      channelNo.value.forEach((items: any) => {
        if (item.channelId == items.id) {
          item.api = items.api
        }
      })
    })
    infoForm.value = {
      image: '',
      id: '',
      buyNumber: '',
      seriesId: '', //系列ID
      type: 0, //套餐类型 0无限叠加 1基础套餐 2叠加包 3体验包
      name: '', //套餐名称
      showName: '', //显示名称
      validity: '', //有效期
      validityType: 1, //有效期类型 0天 1月
      validityRule: 0, //有效期规则 0-月底清零 1-26号清理
      cost: '', //套餐成本
      price: '', //套餐售价
      priceMin: '', //限制代理最低售价
      priceMax: '', //限制代理最高售价
      flowReal: '', //真实流量 单位MB
      flowVirtualType: 0, //虚量方案类型 0固定流量 1动态流量
      flowVirtual: '', //虚量流量单位MB
      flowVirtualId: '', //虚量流量动态方案ID 从/app/set/meal/flow/virtual/get/name/list接口获取
      encoding: '', //套餐编码
      underline: '', //划线价格
      introduction: '',
      next: true, //次月套餐 false关闭 true开启
      postponed: true, //顺延 false关闭 true开启
      multiMonth: true, //多月到账 false关闭 true开启
      sort: 0, //排序
      colour: true, //展示颜色
      leftLower: '', //左下文字
      rightUpper: '', //右上文字
      rightLower: '', //右下文字
      close: false, //状态true关闭,  false正常
      showPay: false, //显示支付 null不设置 0开启 1关闭
      leftUpper: '', //左上文字
      minimumQuantity: 1, //最低购买数量不能低于1
      maximumQuantity: 1, // 最高购买数量 为null不限制
      packageLocking: '', //套餐上锁 0卡板最低余额 1累计充值金额 2积累支付金额 为null不上锁
      packageLockingValue: '',
      upperParallel: '', //上平行
      lowerParallel: '', //下平行
      leftParallel: '', //左平行
      rightParallel: '', //右平行
      packageLockingBalance: '', //最低金额
      validityMore: false,
    }
    seriesIds()
    channel()
    addTitle.value = '新建套餐'
    modal.visibles = true
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }

  //获取标签
  const tagList: any = ref([])
  function tagListFn() {
    get({
      url: '/app/tag/list',
    }).then((res: any) => {
      tagList.value = res.data
    })
  }

  onMounted(async () => {
    await doRefresh()
    await channel()
    await getxuliangs()
    await seriesIds()
    await encodingFn()
    await tagListFn()
  })
</script>

<style lang="less" scoped>
  .border-box {
    margin-top: 20px;
    border: 1px solid #f2f3f5;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 35px;
    .title {
      color: #4e5969;
      margin-right: 10px;
    }
  }
  :deep(.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled)) {
    margin-bottom: 0px !important;
  }
  :deep(.arco-input-append) {
    border-left: 0;
    padding-left: 5px;
    .arco-radio {
      margin-right: 10px;
    }
  }
  .input516 {
    width: 470px;
    margin-left: 20px;
  }

  :deep(.arco-form-item-label) {
    width: 68px;
    text-align: left;
    height: 18px;
  }

  :deep(.arco-form-item-layout-vertical > .arco-form-item-label-col) {
    margin-bottom: 5px;
  }

  :deep(.arco-collapse-item-content-box) {
    padding: 0;
  }

  .asds {
    :deep(.arco-form-item) {
      margin-bottom: 15px;
    }
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }
  :deep(.arco-input-append) {
    padding: 0px;
  }
  :deep(.arco-tabs-nav-tab) {
    width: 100px !important;
  }

  :deep(.arco-tabs-tab-title) {
    width: 52px !important;
    text-align: center;
  }

  :deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab-list) {
    padding: 12px 12px;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    margin-right: 5px;
    padding: 0px;
  }
  .img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  .titleName {
    height: 22px;
    display: flex;
    align-items: center;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    text-align: center;
  }
  :deep(.arco-collapse-item-header-right + .arco-collapse-item-content) {
    padding-left: 0px !important;
  }
  :deep(.arco-collapse-item-content) {
    padding-right: 0px !important;
    background-color: #fff;
  }
  .box {
    display: flex;
    align-items: center;
    height: 15px;

    .line {
      width: 5px;
      height: 15px;
      margin-right: 10px;
      background-color: #40a1ff;
    }
  }

  :deep(.arco-collapse) {
    border: 0 !important;
  }

  :deep(.arco-collapse-item-header) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 20px;
    margin-top: 20px;
    background-color: var(--color-bg-3);
  }

  .centersss {
    :deep(.arco-collapse-item-header) {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin-left: 20px;
      margin-top: 5px;
      background-color: var(--color-bg-3);
    }
  }

  :deep(.arco-collapse-item-content-box) {
    background-color: var(--color-bg-3);
  }

  :deep(.arco-collapse-item-active > .arco-collapse-item-header) {
    border: 0 !important;
  }

  :deep(.arco-collapse-item-header-right) {
    padding-left: 0 !important;
    transition: none;
  }

  :deep(.arco-table-td-content .arco-btn) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }

  :deep(.arco-form-item) {
    margin-bottom: 15px;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }
</style>
<style>
  .arco-drawer-body {
    padding: 0 !important;
  }
</style>
